<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码框效果</title>
    <style>
        .message {
            font-size: 14px;
            margin-top: 5px;
        }

        .correct {
            color: green;
        }

        .incorrect {
            color: red;
        }
    </style>
</head>
<body>
<label for="password">请输入密码：</label>
<input type="password" id="password" onblur="checkPassword()">
<p id="message" class="message"></p>

<script>
    function checkPassword() {
        const passwordInput = document.getElementById('password');
        const messageElement = document.getElementById('message');
        const password = passwordInput.value;

        if (password.length >= 6 && password.length <= 16) {
            messageElement.textContent = "您输入的密码正确";
            messageElement.classList.remove('incorrect');
            messageElement.classList.add('correct');
        } else {
            messageElement.textContent = "密码长度不符合要求，必须为 6~16 位";
            messageElement.classList.remove('correct');
            messageElement.classList.add('incorrect');
        }
    }
</script>
</body>
</html>